<template>
  <div class="hello">
    <button @click="_initVueApp">camera</button>
    <video ref="video" autoplay width="960" height="540"></video>
    <!-- <canvas ref="canvas" width="960" height="540"></canvas> -->
    <hr>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  components: {
  },
  methods: {
    async _initVueApp(){
            this.$refs.video.srcObject= await navigator.mediaDevices.getUserMedia({video:true,audio:false});            
            // this._context2d=this.$refs.canvas.getContext("2d");
            // this.canvas=this.$refs.canvas;
    },
  }, 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
